<template>
	<view class="classroomAppointmentContainer">
		<view class="appointmentInfoHead flex" @click="jumpInfoPage()">
			<image :src="classroomInfo.laboratoryPic" v-if="classroomInfo.laboratoryPic" class="classRoomImg"></image>
			<image src="../../static/images/classroomPic.png" v-else class="classRoomImg"></image>
			<view class="appointmentInfoHeadBox">
				<view class="appointmentInfoHead-title txtOverFlow">
					{{classroomInfo.laboratoryName}}
					<!-- <text v-if="classroomInfo.shareOrderCount < classroomInfo.minPersonCount">（空闲中）</text>
					<text v-else-if="classroomInfo.shareOrderState == 10 ">（待开放）</text>
					<text v-else-if="classroomInfo.shareOrderState == 20">（使用中）</text> -->
				</view>
				<view class="appointmentInfoHead-subTxt flex">
					<text>位置：</text>
					<text class="ftc6">{{classroomInfo.roomLocation}}</text>
				</view>
				<view class="appointmentInfoHead-subTxt flex">
					<text>简介：</text>
				</view>
				<view class="appointmentInfoHead-subTxt flex" style="margin-bottom:15rpx">
					<text>{{((classroomInfo.laboratoryExplain||'')+' ').replace(/\n/g,'')||''}}</text>
				</view>
			</view>
			<image src="../../static/images/moreIconHui.png" class="moreIconHui"></image>
		</view>

	<!-- <view class="mb10" style="margin-top: 20rpx;">
      <view style="text-align:center;font-size: 14px;line-height: 14px;font-weight: bold;">当前日期：{{ currDate }}</view>
      <view style="display: -webkit-flex;display: flex;align-items:center; align-content:center;justify-content:center;padding: 0 20rpx;">
		<view class="submitBtn" style="width:45%;font-size: 28rpx;" @click="preWeek">下一周</view>
        <view style="width:250px"></view>
		<view class="submitBtn" style="width:45%;font-size: 28rpx;" @click="nextWeek">下一周</view>
      </view>
    </view> -->

		<view class="timeSwiperList flex" v-if="userChoosePosition == 2">
			<image src="../../static/images/moreIconHei.png" class="moreIcon moreLeftIcon" @click="scrollLeft=0">
			</image>
			<scroll-view class="timeSwiperBox" scroll-x="true" :scroll-left="scrollLeft">

				<view class="timeSwiperItem" v-for="item,index in classroomInfo.siteAvailableDate"
					:class="{'timeSwiperItem_active':(item.date == chooseDate)}" @click="searchInfo(item.date,1,1)">
					<view>{{item.day}}</view>
					<view>{{item.week}}</view>
				</view>

			</scroll-view>
			<image src="../../static/images/moreIconHei.png" class="moreIcon" @click="scrollRightHandler()"></image>
		</view>
		<!-- 是否共享空间：0否；1是 -->
		<block v-if="classroomInfo.isShare == 0">
			<!-- isPositionAppointment是否位置预约：0：否 1：是 -->
			<block v-if="classroomInfo.isPositionAppointment == 1 && userChoosePosition==2">

				<view class="main  flex_j flexSb">
					<view class='mainL flexV flexC'>
						<view style="height: 20px;">
						</view>
						<view class="mainL-li  flex_j alignC flexC flexV" v-for="temp,jdx in classroomInfo.timeList">
							<view style="line-height: 16px;">{{temp.timeSt}} </view>
							<view style="line-height: 16px;"> {{temp.timeEn}}</view>
						</view>
						<view class="mainL-li  flex_j alignC flexC flexV">
							<view>{{classroomInfo.timeList[classroomInfo.timeList.length-1].timeEn}} -</view>
						</view>
					</view>

					<scroll-view class='disflex-flexgrow-1 ' scroll-x>
						<view class='flex flexH'>

							<view class="mainRUl flex flexV flexC" v-for="item,index in classroomInfo.siteList">
								<view class="mainRUl-li mainRUl-li-spel">{{item.siteName}}</view>
								<block v-for="temp,jdx in classroomInfo.timeList">
									<view class="mainRUl-li tipsOrange" v-if="item.siteTimeList[jdx].used == 1"></view>
									<view class="mainRUl-li tipsOrange"
										v-else-if="item.isHoliday >= 1 && classroomInfo.canUseInHoliday==0"
										@click="holidayNotUse()"><!--节假日不可用而且这一天是节假日--></view>
									<view class="mainRUl-li tipsOrange"
										v-else-if="chooseDate == currDate && currTime>=temp.timeSt"></view>
									<view class="mainRUl-li tipsOpen" v-else-if="temp.isOpen"></view>
									<view class="mainRUl-li "
										:class="{'tipsHui':((item.siteTimeList[jdx].isChoose==2 || !item.siteTimeList[jdx].isChoose) && item.siteTimeList[jdx].used == 0),'tipsOrange':(item.siteTimeList[jdx].isChoose == 1)}"
										v-else @click="chooseSite(item,index,jdx)"></view>

								</block>

							</view>


						</view>

					</scroll-view>
				</view>

			</block>
			<!-- 整段时间选择：是否支持整间预约：0：否 1：是 -->
			<view class="main  flex_j flexSb" v-else-if="classroomInfo.appointmentWay == 1 &&  userChoosePosition==1">
				<view class='mainL flex_j flexV flexC' style="align-self: stretch;width: 30px">
					<view style="height: 30px;"></view>
					<view style="flex: 1;width: 30px" class="flex_j flexV flexC mainL-li">
						<view style="line-height: 16px;width: 30px;">上</view>
						<view style="line-height: 16px;width: 30px;">午</view>
					</view>
					<view style="height: 30px;"/>
					<view style="flex: 1;width: 30px" class="flex_j flexV flexC mainL-li">
						<view style="line-height: 16px;width: 30px;">下</view>
						<view style="line-height: 16px;width: 30px;">午</view>
					</view>
					<view style="height: 30px;"/>
					<view style="flex: 1;width: 30px" class="flex_j flexV flexC mainL-li">
						<view style="line-height: 16px;width: 30px;">晚</view>
						<view style="line-height: 16px;width: 30px;">上</view>
					</view>
				</view>
				<view class='mainL flexV flexC'>
					
					<template v-for="temp,jdx in classroomInfo.timeList">
						<view style="height: 30px;" v-if="jdx % 4 === 0"></view>
						<view class="mainL-li  flex_j alignC flexC flexV" style="font-weight: normal;">
							<view style="line-height: 16px;">{{temp.timeSt}} </view>
							<view style="line-height: 16px;"> {{temp.timeEn}}</view>
						</view>
					</template>
					<!-- <view class="mainL-li  flex_j alignC flexC flexV">
						<view>{{classroomInfo.timeList[classroomInfo.timeList.length-1].timeEn}} -</view>
					</view> -->
				</view>

				<scroll-view class='disflex-flexgrow-1 ' >
					<view class='flex flexH'>
						<view class="mainRUl flex flexV flexC" style="position: relative;" v-for="item,index in classroomInfo.dateTimeList">
							
							<view class="mainRUl-li mainRUl-li-spel" style="height: 15px;line-height: 15px;text-align: center;font-weight: normal;font-size: 22rpx;">{{item.date.substr(5)}}
							</view>
							<view class="mainRUl-li mainRUl-li-spel" style="height: 15px;line-height: 15px;margin-top: 5px;text-align: center;font-weight: normal;">{{item.week}}</view>
							
							
							<block v-for="temp,jdx in classroomInfo.timeList">
								<view style="height: 30px;" v-if="jdx > 0 && jdx % 4 === 0"></view>
								<view class="mainRUl-li tipsOrange" v-if="item.timeList[jdx].used == 1"></view>
								<view class="mainRUl-li tipsOrange"
									v-else-if="item.isHoliday >= 1 && classroomInfo.canUseInHoliday==0"
									@click="holidayNotUse()"><!--节假日不可用而且这一天是节假日--></view>
								<view class="mainRUl-li tipsOrange"
									v-else-if="item.date == currDate && currTime>temp.timeSt"></view>
								<view class="mainRUl-li tipsOpen" v-else-if="temp.isOpen"></view>
								<view class="mainRUl-li "
									:class="{'tipsHui':((item.timeList[jdx].isChoose==2 || !item.timeList[jdx].isChoose)),'tipsOrange':(item.timeList[jdx].isChoose == 1)}"
									v-else @click="chooseTimenew(item.date,index,jdx)"></view>
								<!-- <view class="mainRUl-li " :class="{'tipsGreen':((item.timeList[jdx].isChoose==2 || !item.timeList[jdx].isChoose)),'tipsOrange':(item.timeList[jdx].isChoose == 1)}" v-else  @click="chooseTimenew(item.date,index,jdx)">111</view> -->

							</block>
							<view style="position: absolute; top: 50px; bottom: 0px; right: -5px; width: 1px; background-color: #ddd;"/>

						</view>


					</view>

				</scroll-view>
			</view>

			<view class="timeStationBox" v-else>
				<view class="noDataTxt" style="margin-top: 200rpx;">此教室暂时无法预约，请联系管理员！</view>
			</view>
			<view class="footer-tips">
				<view class="tipsBox flex">
					<view class="tipsTxt">预约说明：</view>
					<view class="tipsItem flex">
						<view class="tipsHui tipsColor"></view>
						<view>可选</view>
					</view>
					<!-- <view class="tipsItem flex ">
					<view class="tipsOrange tipsColor"></view>
					<view>已选</view>
				</view> -->
					<view class="tipsItem flex">
						<view class="tipsOrange tipsColor"></view>
						<view>已约</view>
					</view>
					<view class="tipsItem flex">
						<view class="tipsOpen tipsColor"></view>
						<view>开放</view>
					</view>
				</view>
				<view class="selectedTimeBox">
					<block v-if="classroomInfo.isPositionAppointment == 1 && userChoosePosition==2">
						<view class="selectedTimeTxt">已选时间（{{chooseSiteList.length}}）</view>
						<block v-if="chooseSiteList.length > 0">
							<view class="selectedTimeItem" v-for='item,index in chooseSiteList'>
								<view>{{item.timeSt}}-{{item.timeEn}}</view>
								<view>{{item.siteName}}</view>
							</view>
						</block>
						<view class="noDataTxt" v-else>暂未选择时间</view>
					</block>
					<block v-else>
						<view class="selectedTimeTxt">已选时间（{{chooseTimeList.length}}）</view>
						<block v-if="chooseTimeList.length > 0">
							<view class="selectedTimeItem" v-for='item,index in chooseTimeList'>
								<view>{{item.timeSt}}-{{item.timeEn}}</view>
								<view>{{item.dateStr}}</view>
							</view>
						</block>
						<view class="noDataTxt" v-else>暂未选择时间</view>
					</block>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="appointmentInfoBox">
				<!-- 用户未预约-->
				<block v-if="classroomInfo.hasAppointment == 0">
					<!-- 不满足最低要求 -->
					<view class="appointmentInfoNum"
						v-if="classroomInfo.shareOrderCount < classroomInfo.minPersonCount">
						目前仅{{classroomInfo.shareOrderCount}}人预约，还需要
						<text v-if="classroomInfo.minPersonCount-classroomInfo.shareOrderCount < 0">0</text>
						<text v-else>{{classroomInfo.minPersonCount-classroomInfo.shareOrderCount}}</text>
						人才可开放使用！
					</view>
					<!-- 达到最低要求且人数未达到上限时 -->
					<view class="appointmentInfoNum"
						v-if="classroomInfo.shareOrderCount >= classroomInfo.minPersonCount && classroomInfo.shareOrderCount < classroomInfo.maxPersonCount">
						已达到最低使用要求，最多还可预约{{classroomInfo.maxPersonCount-classroomInfo.shareOrderCount}}人。
					</view>
					<!-- 超过上限时 -->
					<view class="appointmentInfoNum"
						v-if="classroomInfo.shareOrderCount >= classroomInfo.maxPersonCount">
						已达到使用上限要求，请选择其他教室预约！
					</view>
				</block>
				<block v-else>
					<!-- 未达到最低要求 -->
					<view class="appointmentInfoNum"
						v-if="classroomInfo.shareOrderCount < classroomInfo.minPersonCount">
						您已预约,目前仅{{classroomInfo.shareOrderCount}}人,还需要{{classroomInfo.minPersonCount-classroomInfo.shareOrderCount}}人才可开放使用！
					</view>
					<!-- 达到最低要求 -->
					<view class="appointmentInfoNum"
						v-if="classroomInfo.shareOrderCount >= classroomInfo.minPersonCount">
						您已预约,已达到最低使用要求,请前往使用。
					</view>
				</block>
				<!-- 空闲中:无人预约或者预约人数没有达到最低限制 -->
				<!-- <view class="appointmentInfoState stateOrange" v-if="classroomInfo.shareOrderCount < classroomInfo.minPersonCount">空闲中</view>
				<view class="appointmentInfoState stateGreen" v-else-if="classroomInfo.shareOrderState == 10 ">待开放</view>
				<view class="appointmentInfoState stateRed" v-else-if="classroomInfo.shareOrderState == 20">使用中</view> -->
			</view>
			<!-- <view class="appointmentInfoNum" style="color: red;" v-if='classroomInfo.hasAppointment == 1'>您已预约</view> -->
		</block>
		<view class="submitBtnBox">

			<!-- hasAppointment==1  不可以提交  已预约 -->

			<!-- 共享订单用原接口 -->
			<view class="submitBtn" v-if="classroomInfo.isVisited == 1 && isInvitation"
				style="background: #bcbcbc;font-size: 26rpx;">加入邀请</view>
			<view class="submitBtn" v-if="classroomInfo.hasAppointment == 1 && isInvitation"
				style="background: #bcbcbc;font-size: 26rpx;">加入邀请</view>
			<view class="submitBtn" style="font-size: 26rpx;" v-else-if="classroomInfo.isShare == 1 && isInvitation"
				@click="showPop()">加入邀请</view>
			<view class="submitBtn" style="font-size: 26rpx;" v-else-if="classroomInfo.isShare == 0 && isInvitation"
				@click="showPop()">加入邀请</view>
			<view class="submitBtn" v-else-if='classroomInfo.hasAppointment == 1'
				style="background: #bcbcbc;font-size: 26rpx;">提交预约</view>
			<view class="submitBtn"
				v-else-if="classroomInfo.isShare == 0 && classroomInfo.isPositionAppointment == 1 && (!classroomInfo.siteList || classroomInfo.siteList.length < 0)"
				style="background: #bcbcbc;font-size: 26rpx;">提交预约</view>

			<view class="submitBtn" style="font-size: 26rpx;" v-else @click="showPop()">提交预约</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="popBox">
				<view class="popTitle">请填写以下信息</view>
				<!-- 原来的使用说明是手动写的-->
				<!-- 下面改成选荐的 -->
				<view style="height: 35px;" v-if="isShow">
					团队名称：
				</view>
				<input v-model="teamName" v-if="isShow" placeholder=""
					style="border-bottom: 1px solid #dedede;width:80%;" />

				<view style="height: 35px;margin-top:10px;">
					预约目的：
				</view>

				<radio-group @change="changeRemark" v-if='userChoosePosition==1&& roomType==0'
					style="overflow: hidden;">
					<!--整间预约的备注-->
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel"
						v-for="(itemRemark,idxRemark) in classRoomAppointRemark" :key="idxRemark"
						v-if="itemRemark.remarkId !='remark-82F591E82B4E882B' ">
						<view>
							<radio :value="itemRemark.remarkId" color='#19AD78'
								:checked="itemRemark.remarkId == userChooseRemarkId" />
						</view>
						<view>{{itemRemark.remarkContent}}</view>
					</label>
					<div style="width:100%;height:5px;clear:both;"></div>
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel" style="width:100%">
						<view>
							<radio :value="otherId" color='#19AD78' :checked="otherId == userChooseRemarkId" />
						</view>
						<view style="width:80%;">
							<label style="float:left;line-height: 30px;">其他：</label>
							<input v-model="otherRemark" maxlength="20"
								style="width:70%;float: left;;border: 1px solid #dedede;border-radius: 5px;height: 30px;line-height: 30px;" />
						</view>
					</label>
				</radio-group>
				<radio-group @change="changeRemark" v-if='roomType==1' style="overflow: hidden;">
					<!--朗读亭预约的备注-->
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel" style="float:left;"
						v-for="(itemRemark,idxRemark) in readingBoothAppointRemark" :key="idxRemark"
						v-if="itemRemark.remarkId !='remark-82F591E82B4E882B' ">
						<view>
							<radio :value="itemRemark.remarkId" color='#19AD78'
								:checked="itemRemark.remarkId == userChooseRemarkId" />
						</view>
						<view>{{itemRemark.remarkContent}}</view>
					</label>
					<div style="width:100%;height:5px;clear:both;"></div>
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel" style="width:100%">
						<view>
							<radio :value="otherId" color='#19AD78' :checked="otherId == userChooseRemarkId" />
						</view>
						<view style="width:80%;"><label style="float:left;">其他：</label>
							<input v-model="otherRemark" maxlength="20"
								style="width:80%;float: left;;border: 1px solid #dedede;border-radius: 5px;" />
						</view>
					</label>
				</radio-group>

				<radio-group @change="changeRemark" v-if='userChoosePosition==2 && roomType==0'
					style="overflow: hidden;">
					<!--位置预约的备注-->
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel"
						v-for="(itemRemark,idxRemark) in positionAppointRemark" :key="idxRemark">
						<view>
							<radio :value="itemRemark.remarkId" color='#19AD78'
								:checked="itemRemark.remarkId == userChooseRemarkId" />
						</view>
						<view>{{itemRemark.remarkContent}}</view>
					</label>
					<div style="width:100%;height:5px;clear:both;"></div>
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel" style="width:100%">
						<view>
							<radio :value="otherId" color='#19AD78' :checked="otherId == userChooseRemarkId" />
						</view>
						<view style="width:80%;"><label style="float:left;">其他：</label>
							<input v-model="otherRemark" maxlength="20"
								style="width:80%;float: left;;border: 1px solid #dedede;border-radius: 5px;" />
						</view>
					</label>
				</radio-group>

				<view style="height: 35px;margin-top:10px;" v-if="roomType==0 && !isTeachPurpose">
					预约主题：
				</view>
				<input v-model="topicName" placeholder=""
					style="border-bottom: 1px solid #dedede;width:80%;margin-bottom:20px;" v-if="roomType==0" />

				<view style="height: 35px;margin-top:10px;" v-if="isTeachPurpose && userType == 1">
					课程名称：
				</view>
				<input v-model="courseName" placeholder=""
					style="border-bottom: 1px solid #dedede;width:80%;margin-bottom:20px;" v-if="isTeachPurpose && userType == 1" />
				
				<view style="height: 35px;margin-top:10px;" v-if="isTeachPurpose && userType == 1">
					学时：
				</view>
				<input v-model="courseHour" placeholder=""
					style="border-bottom: 1px solid #dedede;width:80%;margin-bottom:20px;" v-if="isTeachPurpose && userType == 1" />
			
				<view style="height: 35px;margin-top:10px;" v-if="isTeachPurpose && userType == 1">
					班级：
				</view>
				<input v-model="className" placeholder=""
					style="border-bottom: 1px solid #dedede;width:80%;margin-bottom:20px;" v-if="isTeachPurpose && userType == 1" />
				<view style="height: 35px;margin-top:10px;" v-if="isTeachPurpose && userType == 1">
					人数：
				</view>
				<input v-model="peopleNumber" placeholder=""
					style="border-bottom: 1px solid #dedede;width:80%;margin-bottom:20px;" v-if="isTeachPurpose && userType == 1" />


				<view class="flex">
					<button @click="closePop()" class="popBtn">关闭</button>
					<button @click="surePop()" class="popBtn">确认</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="choosePositionOrWayPop" :mask-click="false">
			<view class="popBox" style="margin: 40rpx;">
				<view class="popTitle">请选择预约方式</view>
				<radio-group @change="changeCheck">
					<label class="uni-list-cell uni-list-cell-pd flex radioLabel"
						v-for="(item,idx) in positionWayChooseList" :key="idx">
						<view>
							<radio :value="item.value" color='#19AD78' :checked="item.value == userChoosePosition" />
						</view>
						<view>{{item.name}}{{item.tips}}</view>
					</label>
				</radio-group>
				<view class="flex">
					<button @click="sureChoosePop()" class="popBtn">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currLaboratoryId: '',
				roomType: 0,
				userName: '',
				userType: 0,
				isShow: false,
				teamName: '', //团队名称
				topicName: '', //预约主题
				leaderName: '', //预约召集人
				classroomInfo: {},
				currYear: '',
				week: 0,
				weeks: [],
				classroomState: 3, //1有座位，2已满员，3使用中，4已预约
				dateList: [],
				chooseDate: '',
				chooseTimeList: [], //整个时间段选择的时间
				chooseSiteList: [], //位置选择
				isInvitation: false, //是否邀请
				scrollLeft: 0,
				orderId: '', //只有邀请的时候才有
				currDate: '',
				remarks: '', //提交使用说明
				remarkIds: '', //已选择的预约备注原因，后来客户确认只能选择一个
				otherId: 'otherId',
				otherRemark: '', //其他的备注内容
				userChoosePosition: 1,
				userChooseRemarkId: '',
				positionWayChooseList: [{
					name: '整间预约：',
					value: '1',
					tips: ''
				}, {
					name: '位置预约：',
					value: '2',
					tips: ''
				}],
				//整间预约可选择的备注原因列表
				classRoomAppointRemark: [],
				//朗读亭预约可选择的备注原因列表
				readingBoothAppointRemark: [],
				//位置预约可选择的备注原因列表
				positionAppointRemark: [],
				//共享预约可选择的备注原因列表
				shareAppointRemark: [],
				courseName: '',
				className: '',
				courseHour: '',
				peopleNumber: ''
				
			}
		},
		onLoad(options) {
			//查询预约备注列表
			this.getAppointBaseRemark();
			this.getUserName();
			console.log(options)
			let _this = this;
			// #ifdef H5
			if (options.orderId && options.orderId != undefined) {
				let orderId = options.orderId;
				// getApp().globalData.orderNum = orderId;
				uni.setStorage({
					key: 'orderId',
					data: orderId
				});
			}
			uni.getStorage({
				key: 'token',
				success: function(res) {
					getApp().globalData.token = res.data;
				}
			});
			// #endif
			if (options.scene && options.scene != undefined) {
				this.isInvitation = true;
				this.orderId = options.scene;
				this.searchOrderInfo(options.scene);
			} else if (options.orderId && options.orderId != undefined) {
				this.isInvitation = true;
				this.orderId = options.orderId;
				this.searchOrderInfo(options.orderId);
			} else {
				this.currLaboratoryId = options.laboratoryId;
			}

		},
		onShow() {
			this.chooseTimeList = [];
			this.chooseSiteList = [];
			this.remarks = '';
			let date = new Date();
			this.currYear = date.getFullYear();
			let month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
			let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
			this.currDate = this.currYear + '-' + month + '-' + day;
			let hour = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours();
			let minute = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes();
			this.currTime = hour + ':' + minute;
			if (this.currLaboratoryId) {
				this.getCourseScheduleByWeek();
			}
		},
		/* onHide() {
			uni.removeStorageSync('orderId');
		},
		onUnload: function() {
			uni.removeStorageSync('orderId');
		}, */
		computed: {
			isTeachPurpose() {
				return this.userType === 1 && this.remarkIds== this.classRoomAppointRemark.find(v=>v.remarkContent === '教学').remarkId;
			}
		},
		methods: {
			preWeek() {
			      this.week = this.week - 1
			      this.getCourseScheduleByWeek()
			    },
			    nextWeek() {
			      this.week = this.week + 1
			      this.getCourseScheduleByWeek()
			    },
			    getCourseScheduleByWeek() {
			      const that = this
				  this.$utils.requestFun('/curriculum/curriculumStudy/api/getCourseScheduleByWeek', {
				  	token: getApp().globalData.token,
					week: this.week
				  }, 'GET').then(res => {
				  	this.weeks = res.data.data.weekList
					console.log(this.weeks)
					this.searchInfo(this.weeks[0].date);
				  })
			    },
			//日期右箭头点击
			scrollRightHandler() {
				//如果是邀请就要判断选中的日期在可视区域内
				if (this.classroomInfo.siteAvailableDate.length > 5) {
					this.scrollLeft = 60 * classroomInfo.siteAvailableDate.length - 1;
				}
			},
			//选择整间还是预约
			changeCheck: function(evt) {
				this.userChoosePosition = evt.detail.value;
			},
			changeRemark: function(evt) {
				console.log(evt.detail.value);
				if (evt.detail.value) {
					this.remarkIds = evt.detail.value;
				}
				console.log("remarkIds=" + this.remarkIds);
			},
			getUserName() {

				this.$utils.requestFun('/member/memberSchoolUsers/api/selectMemberUserInfoByToken', {
					token: getApp().globalData.token
				}, 'GET').then(res => {
					this.userName = res.data.data.userName;
					this.userType = res.data.data.userType;
				})
			},
			//确定选择整间还是位置按钮
			sureChoosePop() {
				this.$refs.choosePositionOrWayPop.close();
			},
			//获取天数和弹框内容详情
			getInfoTips(appCode, flag = 1) {

				let _this = this;
				this.$utils.requestFun('/auth/auth/api/channelConfigApi', {
					channelId: getApp().globalData.channelId,
					appCode: appCode
				}, 'GET').then(res => {
					if (appCode == 'SYS005') { //整间
						_this.positionWayChooseList[0].tips = res.data.data.info;
					} else {
						_this.positionWayChooseList[1].tips = res.data.data.info;
					}

				})
			},
			//如果是邀请的情况下，需要提示是否确认加入
			searchOrderInfo(orderId) {
				//先查询订单信息
				let _this = this;
				this.$utils.requestFun('/stadium/laboratoryOrder/api/getLaboratoryOrderDetail?route=curriculum', {
					orderId: _this.orderId,
					appId: getApp().globalData.appid,
					token: getApp().globalData.token
				}, 'GET').then(res => {
					_this.classroomInfo = res.data.data;
					_this.userChoosePosition = 1;
					_this.currLaboratoryId = res.data.data.laboratoryId;
					let orderDetailList = res.data.data.orderDetailList;
					_this.chooseDate = orderDetailList[0].reserveDate;
					if (res.data.data.isShare == 0 && res.data.data.orderDetailList && res.data.data
						.orderDetailList.length > 0) {
						//返回的时间选中
						for (let i = 0; i < orderDetailList.length; i++) {
							orderDetailList[i].timeSt = orderDetailList[i].startTime;
							orderDetailList[i].timeEn = orderDetailList[i].endTime;
							orderDetailList[i].dateStr = _this.chooseDate;
						}
						_this.chooseTimeList = orderDetailList;
					}
				})
			},

			//获取预约备注内容
			getAppointBaseRemark() {
				//获取预约备注内容
				let _this = this;
				this.$utils.requestFun('/stadium/baseRemark/api/queryBaseRemarkList?route=curriculum', {
					page: 1,
					limit: 99999,
					appId: getApp().globalData.appid,
					token: getApp().globalData.token
				}, 'GET').then(res => {
					console.log("预约备注列表");
					console.log(res.data.data)
					if (res.data.data) {
						const data = res.data.data.data;
						for (var i = 0; i < data.length; i++) {
							if (data[i].remarkType == 0) {
								_this.shareAppointRemark.push(data[i]);
							} else if (data[i].remarkType == 1) {
								if(_this.userType === 0 && data[i].remarkContent === '教学') {
									continue
								}
								_this.classRoomAppointRemark.push(data[i]);
							} else if (data[i].remarkType == 2) {
								_this.positionAppointRemark.push(data[i]);
							} else if (data[i].remarkType == 3) {
								_this.readingBoothAppointRemark.push(data[i]);
							}
						}

						console.log("classRoomAppointRemark" + _this.classRoomAppointRemark);

					}

				})
			},



			//确认加入邀请
			submitInvitation() {
				let _this = this;
				this.$utils.requestFun('/stadium/laboratoryOrder/api/addLaboratoryVisiteUsers?routh=curriculum', {
					fromOrderId: _this.orderId,
					orderId: _this.orderId,
					appId: getApp().globalData.appid,
					token: getApp().globalData.token,
					remarks: _this.remarks
				}, 'GET').then(res => {
					let timeStr = _this.chooseDate;
					uni.showToast({
						title: '加入邀请成功!',
						success() {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/appointmentInfo/appointmentInfo?orderId=' +
										_this.orderId,
								});
								/* 
								uni.redirectTo({
									url: '/pages/appointmentSuccess/appointmentSuccess?flag=2&name='+_this.classroomInfo.laboratoryName+
									'&time='+timeStr+'&location='+_this.classroomInfo.roomLocation+'&orderId='+_this.orderId
								});
								*/
							}, 1000)
						}
					})
				})
				uni.removeStorageSync('orderId');
			},
			jumpInfoPage() {
				let date = this.chooseDate;
				uni.navigateTo({
					url: '/pages/classroomInfo/classroomInfo?laboratoryId=' + this.currLaboratoryId + '&date=' +
						date,
				});
			},
			searchInfo(dateStr, isrefresh = 0, closetips = 0) {
				console.log('---')
				if (this.isInvitation) {
					return;
				}
				let _this = this;
				_this.chooseDate = dateStr;
console.log('xxx')
				//刷新时间
				this.chooseTimeList = [];
				this.chooseSiteList = [];
				this.remarks = '';
				let date = new Date();
				this.currYear = date.getFullYear();
				let month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
				let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
				this.currDate = this.currYear + '-' + month + '-' + day;

				let hour = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours();
				let minute = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes();
				this.currTime = hour + ':' + minute;

				this.$utils.requestFun('/stadium/stadium/api/findLaboratoryByIdApi?routh=curriculum', {
					laboratoryId: _this.currLaboratoryId,
					date: dateStr,
					appId: getApp().globalData.appid,
					token: getApp().globalData.token
				}, 'GET').then(res => {

					_this.classroomInfo = res.data.data;
					//不是共享空间并且不是位置预约 0否1是
					//位置和整间都被选择了，查询详情并弹框

					//检查默认设置
					if (isrefresh == 0) { //代表第一次调用数据
						let df_userChoosePosition = 0;
						if (_this.classroomInfo.isShare == 0 && _this.classroomInfo.appointmentWay == 1) {
							_this.userChoosePosition = 1;
						}
						if (_this.classroomInfo.isShare == 0 && _this.classroomInfo.isPositionAppointment == 1 &&
							_this.classroomInfo.appointmentWay == 0) {
							_this.userChoosePosition = 2;
						}
					}
					this.roomType = _this.classroomInfo.roomType || 0
					if (_this.classroomInfo.isShare == 0 && _this.classroomInfo.isPositionAppointment == 1 && _this
						.classroomInfo.appointmentWay == 1) {
						_this.getInfoTips('SYS005', 2); //整间预约文字说明 channelId=hnsd appCode=SYS005
						_this.getInfoTips('SYS006', 2); //位置预约文字说明 channelId=hnsd appCode=SYS006
						if (closetips == 0) { //代表第一次调用数据
							_this.$refs.choosePositionOrWayPop.open();
						}
					}
				})
			},

			//整个时间段，选择时间
			chooseTimenew(day, idx, idy) {

				if (this.isInvitation) {
					return;
				}

				if (day != this.chooseDate) { //不是同一天的时间段，清空之前的选择

					for (let i = 0; i < this.chooseTimeList.length; i++) {
						this.classroomInfo.dateTimeList[this.chooseTimeList[i].datekey1]['timeList'][this.chooseTimeList[i]
							.datekey2
						].isChoose = 2
					}
					this.chooseTimeList = [];

				}

				this.chooseDate = day;

				let data = this.classroomInfo.dateTimeList[idx]['timeList'][idy];
				let isChoose = this.classroomInfo.dateTimeList[idx]['timeList'][idy].isChoose;





				//this.classroomInfo.dateTimeList[idx]['timeList'][idy].isChoose = (isChoose == undefined || isChoose==2) ? 1 : 2;

				this.$set(this.classroomInfo.dateTimeList[idx]['timeList'][idy], 'isChoose', (isChoose == undefined ||
					isChoose == 2) ? 1 : 2)


				if (this.classroomInfo.dateTimeList[idx]['timeList'][idy].isChoose == 1) {
					data.dateStr = this.classroomInfo.dateTimeList[idx].date;
					data.datekey1 = idx;
					data.datekey2 = idy;

					if (this.classroomInfo.projectDuration == 1) {
						if (this.chooseTimeList.length >= this.classroomInfo.maxOrderTime) {
							uni.showToast({
								title: '最长可预约' + this.classroomInfo.maxOrderTime + '小时',
								icon: 'none'
							});
							this.$set(this.classroomInfo.dateTimeList[idx]['timeList'][idy], 'isChoose', 2);

							return;
						}
					}
					if (this.classroomInfo.projectDuration == 0.5) {
						if (this.chooseTimeList.length * 0.5 >= this.classroomInfo.maxOrderTime) {
							uni.showToast({
								title: '最长可预约' + this.classroomInfo.maxOrderTime + '小时',
								icon: 'none'
							});
							this.$set(this.classroomInfo.dateTimeList[idx]['timeList'][idy], 'isChoose', 2);
							return;
						}
					}



					this.chooseTimeList.push(data);
					console.log('chooseTimeList', this.chooseTimeList);
				} else {
					if (this.chooseTimeList.length > 0) {
						for (let i = 0; i < this.chooseTimeList.length; i++) {
							if (this.chooseTimeList[i].timeSt == data.timeSt &&
								this.chooseTimeList[i].timeEn == data.timeEn) {
								this.chooseTimeList.splice(i, 1);
								break;
							}
						}
					}
				}

			},
			//节假日不可预约提示
			holidayNotUse() {
				uni.showToast({
					title: '此日期暂不开放',
					icon: 'none'
				});
			},
			//座位选择
			chooseSite(item, idx, jdx) {
				if (this.isInvitation) {
					return;
				}
				let isChoose = this.classroomInfo.siteList[idx].siteTimeList[jdx].isChoose;
				this.classroomInfo.siteList[idx].siteTimeList[jdx].isChoose = (isChoose == undefined || isChoose == 2) ?
					1 : 2;
				if (this.classroomInfo.siteList[idx].siteTimeList[jdx].isChoose == 1) {
					let obj = {
						siteId: item.siteId,
						siteName: item.siteName,
						timeSt: item.siteTimeList[jdx].timeSt,
						timeEn: item.siteTimeList[jdx].timeEn,
					}
					this.chooseSiteList.push(obj);
				} else {
					if (this.chooseSiteList.length > 0) {
						for (let i = 0; i < this.chooseSiteList.length; i++) {
							if (this.chooseSiteList[i].siteId == item.siteId &&
								this.chooseSiteList[i].timeSt == item.siteTimeList[jdx].timeSt &&
								this.chooseSiteList[i].timeEn == item.siteTimeList[jdx].timeEn) {
								this.chooseSiteList.splice(i, 1);
								break;
							}
						}
					}
				}
			},
			//提交前加弹框
			showPop() {
				if (this.isInvitation) {
					this.submitHandler();
					return
				}
				if (this.classroomInfo.isShare == 0) {
					if (this.userChoosePosition == 2 && this.chooseSiteList.length <= 0) {
						uni.showToast({
							title: '请选择座位！',
							icon: 'none'
						});
						return;
					} else if (this.userChoosePosition == 1 && this.chooseTimeList.length <= 0) {
						uni.showToast({
							title: '请选择时间段！',
							icon: 'none'
						});
						return;

					}
				}

				if (this.classroomInfo.isShare == 1 && this.classroomInfo.shareOrderRemark == 1) {
					//	是否共享空间：0否；1是， shareOrderRemark number 共享空间下单是否需要填写备注 0不需要；1需要 
					this.$refs.popup.open();
				} else if (this.classroomInfo.isShare == 0 && this.classroomInfo.appointmentWay == 1 && this.classroomInfo
					.classroomOrderRemark == 1) {
					//	是否支持整间预约：0：否 1：是，classroomOrderRemark number 整间预约下单是否需要填写备注 0不需要；1需要 
					this.$refs.popup.open();
				} else if (this.classroomInfo.isShare == 0 && this.classroomInfo.isPositionAppointment == 1 && this
					.classroomInfo.positionOrderRemark == 1) {
					//	是支持否位置预约：0：否 1：是，positionOrderRemark number 位置预约下单是否需要填写备注 0不需要；1需要 
					this.$refs.popup.open();
				} else {
					// this.submitHandler();
					this.$refs.popup.open();
				}
			},
			//确认判断调用哪个方法
			surePop() {
				if (this.remarkIds.length == 0 && this.userChoosePosition == 1 && this.classroomInfo
					.classroomOrderRemark == 1) {
					uni.showToast({
						title: '请选择预约目的！',
						icon: 'none'
					})
					return;
				}
				if (this.remarkIds.length == 0 && this.userChoosePosition == 2 && this.classroomInfo.positionOrderRemark ==
					1) {
					uni.showToast({
						title: '请选择预约目的！',
						icon: 'none'
					})
					return;
				}
				this.submitHandler();
				this.$refs.popup.close();
			},
			//用来判断调用哪个提交的方法
			submitHandler() {
				if (this.classroomInfo.isShare == 1 && this.isInvitation) {
					this.submitAppointment();
				} else if (this.classroomInfo.isShare == 0 && this.isInvitation) {
					this.submitInvitation();
				} else {
					this.submitAppointment();
				}
			},

			closePop() {

				this.$refs.popup.close();

			},
			//提交预约
			submitAppointment() {
				uni.removeStorageSync('orderId');
				let _this = this;
				let pointArr = [];
				if (getApp().globalData.token == '') {
					uni.showToast({
						title: '请登录',
						icon: 'none',
						success() {
							uni.navigateTo({
								url: '/pages/login/login',
							});
						}
					})
					return;
				}
				let timeStr = _this.chooseDate;
				//共享空间
				if (this.classroomInfo.isShare == 1) {
					this.$utils.requestFun('/stadium/laboratoryOrder/api/saveLaboratoryOrder?route=curriculum', {
						token: getApp().globalData.token,
						appId: getApp().globalData.appid,
						laboratoryId: _this.currLaboratoryId,
						fromOrderId: _this.orderId,
						orderId: _this.orderId,
						appointmentDate: timeStr,
						remarks: _this.remarks
					}, 'GET').then(res => {
						let orderId = res.data.data;
						/* uni.navigateTo({
							url: '/pages/appointmentSuccess/appointmentSuccess?flag=1&name='+_this.classroomInfo.laboratoryName+'&time='+timeStr+'&location='+_this.classroomInfo.roomLocation+'&orderId='+orderId,
						}); */

						// #ifdef MP-WEIXIN
						_this.sendMessage(orderId, timeStr, 1, 't3LKagU-8s_DaWO6qco9kjhqiCKwqVVAUcaKBHdJm4A', _this
							.classroomInfo.roomLocation);
						// #endif

						// #ifdef H5
						_this.sendMessage(orderId, timeStr, 1, 'YtJLqvSMVSHFYd491U8N4nf8VZqGDnTSKkJwmwL7Eqk', _this
							.classroomInfo.roomLocation);
						// #endif
					})
				} else {


					let isClassroomAppointment = 0;
					if (this.userChoosePosition == 2) {
						for (let i = 0; i < this.chooseSiteList.length; i++) {
							let obj = {
								siteId: this.chooseSiteList[i].siteId,
								timeSt: this.chooseSiteList[i].timeSt,
								timeEn: this.chooseSiteList[i].timeEn,
							}
							pointArr.push(obj);
						}
						isClassroomAppointment = 0;
					} else {
						for (let i = 0; i < this.chooseTimeList.length; i++) {
							let obj = {
								timeSt: this.chooseTimeList[i].timeSt,
								timeEn: this.chooseTimeList[i].timeEn,
							}
							pointArr.push(obj);
						}
						isClassroomAppointment = 1;
					}


					if (this.classroomInfo.isShare == 0 && this.classroomInfo.appointmentWay == 1 && this.classroomInfo
						.classroomOrderRemark == 1) {
						//	是否支持整间预约：0：否 1：是，classroomOrderRemark number 整间预约下单是否需要填写备注 0不需要；1需要 
						if (_this.remarkIds == "otherId" && (!_this.otherRemark || _this.otherRemark == "")) {
							uni.showToast({
								title: '请填写其他预约目的！',
								icon: 'none'
							});
							return;
						} else if (_this.remarkIds == '') {
							uni.showToast({
								title: '请选择预约目的！',
								icon: 'none'
							});
							return;
						}
					} else if (this.classroomInfo.isShare == 0 && this.classroomInfo.isPositionAppointment == 1 && this
						.classroomInfo.positionOrderRemark == 1) {
						if (_this.remarkIds == "otherId" && (!_this.otherRemark || _this.otherRemark == "")) {
							uni.showToast({
								title: '请填写其他预约目的！',
								icon: 'none'
							});
							return;
						} else if (_this.remarkIds == '') {
							uni.showToast({
								title: '请选择预约目的！',
								icon: 'none'
							});
							return;
						}
					}

					// if( _this.teamName==""){
					//  uni.showToast({title: '请填写团队名称！', icon: 'none'});
					//  return; 
					// }
					//不是朗读亭
					if (this.roomType == 1) {
						_this.topicName = this.userName
						_this.leaderName = this.userName
					} else {
						if (_this.topicName == "") {
							uni.showToast({
								title: '请填写预约主题！',
								icon: 'none'
							});
							return;
						}
						
					}
					
					if(this.isTeachPurpose) {
						if(this.courseName.length === 0) {
							uni.showToast({
								title: '请填写课程名称', icon: 'none'
							});
							return;
						}
						if(this.courseHour.length === 0) {
							uni.showToast({
								title: '请填写课程学时', icon: 'none'
							});
							return;
						}
						if(this.className.length === 0) {
							uni.showToast({
								title: '请填写班级名称', icon: 'none'
							});
							return;
						}
						if(this.peopleNumber.length === 0) {
							uni.showToast({
								title: '请填写人数', icon: 'none'
							});
							return;
						}
					}

					let params = {
						token: getApp().globalData.token,
						appId: getApp().globalData.appid,
						teamName: _this.teamName,
						topicName: _this.topicName,
						leaderName: _this.leaderName,
						fromOrderId: _this.orderId,
						laboratoryId: _this.currLaboratoryId,
						date: timeStr,
						pointStr: JSON.stringify(pointArr),
						remarks: _this.remarks,
						remarkIds: _this.remarkIds,
						otherRemark: _this.otherRemark,
						isClassroomAppointment: isClassroomAppointment //整间预约  这个参数传1  如果是位置预约这个参数传0
					};
					
					if(this.isTeachPurpose) {
						params.courseName = this.courseName;
						params.courseHour = this.courseHour;
						params.className = this.className;
						params.peopleNumber = this.peopleNumber;
					}

					// if(this.classroomInfo.isPositionAppointment == 1) {
					this.$utils.requestFun('/stadium/laboratoryOrder/api/addLaboratoryOrderBatch?route=curriculum', params, 'GET').then(res => {
						let orderId = res.data.data;
						// #ifdef MP-WEIXIN
						_this.sendMessage(orderId, timeStr, 2, 'uTX-t7q9g0aeD0Mf1u00Reo3kj5oYrSgcahXuNiDSbs');
						// #endif

						// #ifdef H5
						_this.sendMessage(orderId, timeStr, 2, 'AaCEjHiO8SJxWDopn7O9YCWDm3FBT7Xo82Fm1jy0sy0');
						// #endif

					})
					// }
				}
			},
			sendMessage(orderId, timeStr, flag, tmplId, roomLocation = '') {
				let _this = this;
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					// tmplIds: ['uTX-t7q9g0aeD0Mf1u00Reo3kj5oYrSgcahXuNiDSbs','t3LKagU-8s_DaWO6qco9kjhqiCKwqVVAUcaKBHdJm4A'],
					tmplIds: [tmplId],
					complete() {
						uni.navigateTo({
							//url: '/pages/appointmentSuccess/appointmentSuccess?flag='+flag+'&name='+_this.classroomInfo.laboratoryName+'&time='+timeStr+'&location='+roomLocation+'&orderId='+orderId,
							url: '/pages/appointmentInfo/appointmentInfo?orderId=' + orderId,
						});
					}
				})
				// #endif

				// #ifdef H5
				uni.redirectTo({
					//直接跳转到详情页面
					//url: '/pages/appointmentSuccess/appointmentSuccess?flag='+flag+'&name='+_this.classroomInfo.laboratoryName+'&time='+timeStr+'&location='+roomLocation+'&orderId='+orderId,
					url: '/pages/appointmentInfo/appointmentInfo?orderId=' + orderId,

				});
				// #endif	
			}
		}
	}
</script>
<style scoped>
	/deep/.uni-popup .uni-popup__wrapper {
		width: 90% !important;
		padding: 40rpx;
	}
</style>
<style>
	.main {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 236rpx;
	}

	.mainL {
		margin-top: 25rpx;
		width: 90rpx;

	}

	.mainL-li {
		margin-top: 20rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		font-weight: bold;
		color: #666666;
		text-align: center;
		width: 100rpx;
		height: 60rpx;
		border-right: 1rpx solid #fff;
		border-bottom: 1rpx solid #fff;
		line-height: 60rpx;
		display: inline-block;
		font-size: 28rpx;
	}


	.mainRUl {
		margin-left: 20rpx
	}

	.mainRUl-li {
		margin-top: 20rpx;
		width: 80rpx;
		height: 60rpx;
		border-radius: 5px;
		border-bottom: 1rpx solid #fff;
		border-right: 2rpx solid #fff;
	}

	.mainRUl-li.mainRUl-li-spel {
		font-size: 26rpx;
		line-height: 60rpx;
		color: #666;
		font-weight: 700;
	}

	.disflex-flexgrow-1 {
		-webkit-box-flex: 1;
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		flex: 1;
		min-width: 0;
	}

	.flex_j {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
	}

	/*水平排列*/
	.flexH {
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		flex-direction: row;
	}

	.flexV {
		-webkit-box-orient: vertical;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}

	.alignC {
		align-items: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-align-items: center;
		-ms-align-items: center;
		-o-align-items: center;
	}

	.flexC {
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
		-ms-justify-content: center;
		-o-justify-content: center;
	}

	.flexSb {
		justify-content: space-between;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		-o-justify-content: space-between;
	}

	.classroomAppointmentContainer {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		padding-bottom: 140rpx;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.txtOverFlow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.flex {
		display: flex;
	}

	.noDataTxt {
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		line-height: 60rpx;
	}

	.lineBox {
		width: 12rpx;
		height: 2rpx;
		background: #333;
	}

	.classRoomImg {
		width: 140rpx;
		height: 140rpx;
		margin: 30rpx 14rpx 0 34rpx;
		border-radius: 10px;
	}

	.appointmentInfoHead {
		width: 100%;
		/* height: 240rpx; */
		background-image: url("https://t.acoer.cn/guoshiBgImg/appointmentInfoBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.appointmentInfoHeadBox {
		width: 69%;
	}

	.appointmentInfoHead-title {
		font-size: 34rpx;
		color: #222222;
		line-height: 58rpx;
		margin-top: 24rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
	}

	.appointmentInfoHead-subTxt {
		font-size: 24rpx;
		color: #999999;
		line-height: 40rpx;
	}

	.ftc6 {
		font-size: #666666;
		margin-left: 15rpx;
	}

	.moreIconHui {
		width: 27rpx;
		height: 27rpx;
		margin-top: 90rpx;
	}

	.moreLeftIcon {
		transform: rotate(180deg);
	}

	.moreIcon {
		width: 27rpx;
		height: 27rpx;
		margin-top: 44rpx;
		margin-right: 14rpx;
	}

	.timeSwiperList {
		width: 94%;
		height: 110rpx;
		background: #F6F7F9;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 20rpx 24rpx;
	}

	.timeSwiperBox {
		width: 90%;
		overflow: hidden;
		height: 120rpx;
		white-space: nowrap;
	}

	.timeSwiperItem {
		width: 120rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: inline-block;
		margin-right: 10rpx;
		font-size: 28rpx;
		color: #666666;
		line-height: 46rpx;
		text-align: center;
		padding-top: 14rpx;
	}

	.timeSwiperItem_active {
		background: #19AD78;
		color: #FFFFFF
	}

	.timeStationBox {
		width: 100%;
		min-height: 400rpx;
		overflow: scroll;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 236rpx;
	}

	.timeBox {
		width: 130rpx;
		display: inline-table;
		border-right: 1px solid #DDDDDD;
	}

	.timeBox2 {
		width: 130rpx;
		display: inline-table;
		/* border-right: 1px solid #DDDDDD; */
	}

	.timeTxtInfo {
		margin-top: -18rpx;
	}

	.timeTxt {
		font-size: 26rpx;
		font-weight: bold;
		color: #666666;
		text-align: center;
		width: 98rpx;
		height: 62rpx;
		margin-left: -98rpx;
		margin-bottom: 6rpx;
		margin-top: 2rpx;
		line-height: 2rpx;
	}

	.timeTxt2 {
		width: 150rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #666666;
		text-align: right;
		height: 60rpx;
		line-height: 18rpx;
		margin-right: 24rpx;
	}

	.stationBox {
		width: 83%;
		height: 100%;
	}

	.stationTxt {
		/* min-width: 120rpx; */
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #666666;
		line-height: 78rpx;
		/* margin-right: 10rpx; */
		position: absolute;
		height: 70rpx;
		background: #fff;
	}

	.stationTimeBox {
		margin-right: 20rpx;
		min-width: 120rpx;
		position: relative;
	}

	.stationItemBox {
		width: 100%;
		padding-top: 72rpx;
	}

	.stationItem {
		width: 98rpx;
		height: 60rpx;
		background: #EBEBEB;
		border-radius: 10rpx;
		margin-left: 18rpx;
		margin-bottom: 6rpx;
		margin-top: 5rpx;
	}

	.stationTimeItem {
		width: 93%;
		height: 60rpx;
		background: #EBEBEB;
		border-radius: 10rpx;
		margin: 22rpx 24rpx 0rpx 0rpx;
	}

	.tipsBox {
		width: 100%;
		background: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
	}

	.tipsTxt {
		width: 200rpx;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
	}

	.tipsItem {
		width: 23%;
		text-align: left;
		font-size: 28rpx;
		color: #222222;
	}

	.tipsColor {
		width: 36rpx;
		height: 36rpx;
		border-radius: 6rpx;
		margin-top: 24rpx;
		margin-right: 14rpx;
	}

	/* 可选的颜色要变成 #43b673  开放时段的颜色值改成：
#FFC125 ，已预约的颜色值改成：#8B8878  */
	.tipsGreen {
		background: #19AD78;
	}

	.tipsOrange {
		background: #8B8878 ;
	}

	.tipsHui {
		background: #43b673;
	}

	.tipsOpen {
		background: #FFC125;
	}

	.selectedTimeBox {
		width: 94%;
		padding: 0 27rpx;
		height: 140rpx;
		overflow: scroll;
		background-color: #F6F6F6;
	}

	.selectedTimeTxt {
		font-size: 26rpx;
		color: #666666;
		margin-top: 19rpx;
		margin-bottom: 14rpx;
	}

	.selectedTimeItem {
		width: 166rpx;
		height: 70rpx;
		background: #FF7633;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		text-align: center;
		float: left;
		margin-right: 10rpx;
		margin-bottom: 10px;
	}

	.footer-tips {
		width: 100%;
		position: fixed;
		bottom: 126rpx;
	}

	.submitBtnBox {
		width: 100%;
		background-color: #FFFFFF;
		height: 130rpx;
		position: fixed;
		bottom: -1px;
	}

	.submitBtn {
		width: 95%;
		height: 77rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 35rpx;
		line-height: 77rpx;
		display: block;
		margin: 0 auto;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.appointmentInfoBox {
		width: 100%;
		padding-top: 85rpx;
	}

	.appointmentInfoSubTxt {
		margin-top: 32rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666666;
	}

	.appointmentInfoState {
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFEEE7;
		border-radius: 4rpx;
		font-size: 30rpx;
		color: #FF072A;
		text-align: center;
		display: block;
		margin: 0 auto;
		margin-top: 46rpx;
		margin-bottom: 36rpx;
	}

	.stateGreen {
		background: #D1F4E7;
		color: #19AD78;
	}

	.stateRed {
		background: #FFEEE7;
		color: #FF072A;
	}

	.stateOrange {
		background: #FFF3E7;
		color: #FF7607;
	}

	.appointmentInfoNum {
		font-size: 32rpx;
		color: #222222;
		text-align: center;
		margin-bottom: 36rpx;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.bgWhiteSquare {
		width: 130rpx;
		height: 60rpx;
		background: #fff;
		position: absolute;
	}

	.popBox {
		width: 84%;
		margin-left: 4%;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
	}

	.popTextArea {
		border: 1px solid #bbb;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		width: 95%;
	}

	.popBtn {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.popTitle {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.radioLabel {
		line-height: 46rpx;
		margin-bottom: 20px;
		font-size: 30rpx;
		float: left;
		width: 45%;
	}

	.uni-radio-input.uni-radio-input-checked {
		font: normal normal normal 14px/1 uni;
		font-size: 14px;
		content: " " !important;
		color: #fff;
		font-size: 18px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -48%) scale(.73);
		-webkit-transform: translate(-50%, -48%) scale(.73);
	}
</style>